<template>
  <div class="main-container">
    <div class="main-header">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{path: '/link/blogroll'}">友情链接管理</el-breadcrumb-item>
        <el-breadcrumb-item>新增友情链接</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="wrap">
      <div class="content">
        <el-form class="mt-30" ref="form" :model="form" label-width="150px" style="width: 500px;">
          <el-form-item label="排序" prop="sort">
              <el-input-number v-model="form.sort" :min="0" :controls="false"></el-input-number>
            </el-form-item>
          <el-form-item label="站点名称" prop="siteName" >
            <el-input v-model="form.siteName"></el-input>
          </el-form-item>
            <el-form-item label="站点地址" prop="url">
            <el-input v-model="form.url" ></el-input>
          </el-form-item>
           <el-form-item label="是否显示" >
            <el-switch
              v-model="value"
              active-color="#409EFF"
              inactive-color="#C0CCDA">
            </el-switch>
          </el-form-item>
          <el-form-item label="外链添加位置" prop="category">
            <el-select  @change="change" v-model="value1" multiple placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="联系方式" prop="contactWay">
            <el-input v-model="form.contactWay" ></el-input>
          </el-form-item>
          <el-form-item label="站点介绍" prop="introduce">
            <el-input v-model="form.introduce" type="textarea" ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">保存</el-button>
            <el-button @click="onReset">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        options: [{
          value: 1,
          label: 'PC端'
        }, {
          value: 2,
          label: '移动端'
        }],
        value1:[],
        value:false,
        form: {
          sort:'0',
          siteName: '',
          url:'',
          category:'',
          contactWay:'',
          introduce:'',
          showFlag:''
        },
        courseList: [],
        sort:''
      }
    },
    activated() {
      // this.loadData()
      // console.log("11111111111")
      // console.log(this.$route)
      let sortNum = this.$route.query.sort
      this.form.sort = sortNum
      this.sort = sortNum
      this.form={
        sort:this.sort
      }
    },
    mounted() {
      // console.log("11111111111")
      // console.log(this.$route)
      let sortNum = this.$route.query.sort
      this.form.sort = sortNum
      this.sort = sortNum
      this.form={
        sort:this.sort
      }
    },
    methods: {
      onSubmit() {
        if(this.value==true){
            this.form.showFlag='1'
        }else{
            this.form.showFlag='0'
        }
        this.$refs['form'].validate(valid => {
          if (valid) {
            const params = {
              ...this.form,
              // parentCode: this.parentCode,
              // courseLevel: 2,
              // documentType: 2
            }
            this.$api.blogroll.add(params).then(res => {
              if(res.success) {
                this.$message.success('保存成功')
                this.form.sort=this.sort
                this.form.siteName=''
                this.form.url=''
                this.form.category=''
                this.form.contactWay=''
                this.form.introduce=''
                this.form.showFlag=''
                this.value1=''
                this.$router.push('/link/blogroll');    
              }
            })
          }
        })
      },
      onReset() {
        this.$refs.form.resetFields()
        this.form.sort=this.sort
        this.form.siteName=''
        this.form.url=''
        this.form.category=''
        this.form.contactWay=''
        this.form.introduce=''
        this.form.showFlag=''
        this.value1=''
      },
      change(val){
        if(this.value1.length==1 && this.value1[0]==1){
            this.form.category='1'
        }else if(this.value1.length==1 && this.value1[0]==2){
            this.form.category='2'
        }else if(this.value1.length==0){
            this.form.category=''
        }else{
            this.form.category='3'
        }
        console.log(this.form.category)
      }
    }
  }
</script>

<style>

 
</style>
